<template>
    <van-nav-bar
            left-arrow
            @click-left="$router.go(-1)"
    ></van-nav-bar>
    <van-tabs
            scrollspy
            sticky
            color="#FBC546"
    >
        <van-tab title="商品" class="product">
            <!--    banner    -->
            <van-swipe
                    class="my-swipe"
                    :autoplay="3000"
                    indicator-color="skyblue">
                <van-swipe-item v-for="(image, index) in sliderImages" :key="index">
                    <img :src="image">
                </van-swipe-item>
            </van-swipe>
            <!--     商品信息    -->
            <van-cell class="product-info">
                <div class="price-and-share">
                    <span class="price">￥539.00</span>
                    <van-icon name="share-o" class="share"></van-icon>
                </div>
                <div class="title show-in-two-lines">
                    鸿星尔克奇弹2.0跑鞋pro时尚透气女鞋夏季网面碳板科技减震运动鞋专业跑步鞋
                    鸿星尔克奇弹2.0跑鞋pro时尚透气女鞋夏季网面碳板科技减震运动鞋专业跑步鞋
                </div>
                <div class="sales">
                    <span>原价：￥599.00</span>
                    <span>库存：8787双</span>
                    <span>销量：31</span>
                </div>
            </van-cell>
            <!--     商品规格    -->
            <van-cell
                    is-link
                    class="sku"
                    @click="showSpec = true"
            >
                <span>已选择：{{skuType}}</span>
            </van-cell>
        </van-tab>
        <van-tab title="评价" class="comment">
            <van-cell
                    is-link
                    :title="`用户评价(${productData.replyCount})`"
                    :value="`${productData.replyChance}%好评率`"
                    :to="{
                        name: 'comment',
                        params: {
                            productId,
                        }
                    }"
            >
            </van-cell>
            <CommentItem
                    v-for="comment in comments"
                    :key="comment.id"
                    :comment="comment">
            </CommentItem>
        </van-tab>
        <van-tab title="推荐" class="recommend">
            <h2>推荐商品</h2>
            <van-grid :border="false" :column-num="3" :center="false">
                <van-grid-item
                        v-for="item in recommendGoods"
                        :key="item.id"
                        :to="{
                            name: 'product',
                            params: {
                                productId: item.id,
                            }
                        }"
                >
                    <img :src="item.image">
                    <p class="show-in-two-lines title">{{item.store_name}}</p>
                    <p class="price">￥{{item.price}}</p>
                </van-grid-item>
            </van-grid>
        </van-tab>
        <van-tab title="详情">
            <div v-html="description" class="description"></div>
        </van-tab>
    </van-tabs>
    <!-- 弹出层 -->
    <van-popup v-model:show="showSpec" class="specx" position="bottom">
        <Spec
                :product-data="productData"
                @changeSkuType="changeSkuType"
                @changeCartNum="changeCartNum"
        ></Spec>
    </van-popup>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24"/>
        <van-action-bar-icon
                icon="cart-o"
                text="购物车"
                :to="{ name: 'cart' }"/>
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000"/>
        <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart"/>
        <van-action-bar-button type="danger" text="立即购买"/>
    </van-action-bar>
</template>

<script setup>
  import { computed, defineProps, ref } from 'vue'
  import { onBeforeRouteUpdate } from 'vue-router'
  import { getProductDetail, getCommentsByType } from '@/api/product.js'
  import { addCart } from '@/api/cart.js'
  import Spec from './components/Spec.vue'
  import CommentItem from '@/components/CommentItem.vue'

  const { productId } = defineProps({
    productId: {
      type: [String, Number],
      required: true,
    }
  })

  // 产品信息
  const productData = ref({})
  const loadProductDetail = async (productId) => {
    const { status, data } = await getProductDetail(productId)
    if (status === 200) {
      productData.value = data
    }
  }
  loadProductDetail(productId)

  const sliderImages = computed(() => productData.value.storeInfo?.slider_image)

  const description = computed(() => productData.value.storeInfo?.description)

  // 评论
  const comments = ref([])
  const loadComments = async (productId) => {
    const { status, data } = await getCommentsByType(productId, 0)
    if (status === 200) {
      comments.value = data
    }
  }
  loadComments(productId)

  // 推荐商品
  const recommendGoods = computed(() => productData.value.good_list)

  /**
   * 通过导航守卫监听路由变化
   */
  onBeforeRouteUpdate(to => {
    // 返回顶部
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    // 清除旧数据，并请求当前商品ID对应的数据
    productData.value = {}
    loadProductDetail(to.params.productId)
    loadComments(to.params.productId)
  })

  // 规格
  const showSpec = ref(false)
  const skuType = ref('')
  const sku = ref({})
  const changeSkuType = ({ skuType: _skuType, sku: _sku }) => {
    skuType.value = _skuType
    sku.value = _sku
    console.log('sku>>', _sku)
  }

  // 加入购物车
  const handleAddCart = async () => {
    if (!showSpec.value) {
      showSpec.value = true
      return
    }
    await addCart({
      new: 0,
      uniqueId: sku.value.unique,
      productId,
      cartNum,
    })
    showSpec.value = false
  }
  let cartNum = 1
  const changeCartNum = value => {
    cartNum = value
  }
</script>

<style lang="scss" scoped>
    .van-nav-bar {
        position: fixed;
        z-index: 10;
        background: white;
        width: 100%;
    }

    :deep(.van-tabs__nav) {
        margin: 0 60px;
        z-index: 100;
    }

    :deep(.van-tabs__content) {
        background: #F2F2F2;
    }

    .product {
        .my-swipe img {
            width: 100%;
            height: 375px;
        }

        .product-info {
            margin-bottom: 10px;

            .price-and-share {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                    font-size: 24px;
                    font-weight: 700;
                }

                .share {
                    font-size: 20px;
                }
            }

            .title {
                font-size: 16px;
                font-weight: 700;
                margin: 5px 0 10px;
            }

            .sales {
                display: flex;
                justify-content: space-between;
                color: #aaa;
            }
        }

        .sku {
            margin-bottom: 10px;
        }
    }

    .recommend {
        background: white;
        padding: 10px 15px 3px;
        margin-bottom: 10px;

        :deep(.van-grid-item__content) {
            padding: 0;
            padding-bottom: 8px;
        }

        h2 {
            font-size: 18px;
            margin-left: -5px;
            margin-bottom: 5px;
        }

        img {
            width: 107px;
            height: 107px;
        }

        .title {
            font-size: 14px;
            font-weight: 700;
            margin: 2px 3px 3px;
        }

        .price {
            font-size: 12px;
            font-weight: 700;
            color: #F2270C;
        }
    }

    .description {
        width: 100%;

        :deep(img) {
            width: 100%;
        }
    }

    :deep(.van-tabbar-item__text) {
        font-size: 10px;
    }

    .van-action-bar {
        z-index: 9999;
    }
</style>
